/* 
 *.content类的样式规则，用于定义页面中某个主要内容区域的样式。
 * 通过display: flex设置其为弹性盒子布局，方便内部元素进行灵活排列。
 * 设置高度为600px，使其在页面中占据一定的垂直空间，同时通过 margin: 20px auto
 * 让该内容区域在水平方向上有20px的外边距，并在页面中自动居中显示，保持整体布局的美观性。
 */
 .content {
  display: flex;
  height: 600px;
  margin: 20px auto;
}

/* 
 * 选择.content类下的.left类元素，用于定义该部分的样式，通常这可能是内容区域中靠左的部分。
 * 设置宽度为600px，确定其在水平方向上的尺寸大小。
 * box-sizing: border-box的作用是让元素的宽度包含了边框（border）和内边距（padding）的值，
 * 避免因添加边框或内边距而导致元素实际宽度超出预期的情况。
 * 同时设置右边距为10px，用于和相邻的右边元素拉开一定的距离，使布局更加清晰。
 */
.content>.left {
  width: 600px;
  box-sizing: border-box;
  margin-right: 10px;
}

/* 
 * 选择.content类下的.right类元素，用于定义该部分的样式，通常是内容区域中靠右的部分。
 * flex: 1的设置让该元素能够自动占据剩余的可用空间，实现弹性布局下的自适应宽度分配。
 * 设置背景颜色为pink（粉色），为该部分添加背景色，使其在视觉上与其他部分区分开来。
 * 通过padding: 20px添加内边距，让内部元素与边界有一定的间距，提升视觉效果，同样使用了box-sizing: border-box
 * 来保证内边距不会影响元素的整体宽度计算。
 * 再次设置display: flex将其内部元素也按照弹性盒子布局进行排列，并且通过flex-direction: column
 * 指定子元素按垂直方向排列，最后使用justify-content: space-around让子元素在垂直方向上均匀分布，
 * 各个子元素之间有相等的间隔空间。
 */
.content>.right {
  flex: 1;
  background-color: pink;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* 
 * 选择.content类下的.right类元素内部的.title类元素，用于定义标题部分的样式。
 * 设置字体大小为24px，使标题文字以合适的大小显示，突出显示内容的主题。
 */
.content>.right>.title {
  font-size: 24px;
}

/* 
 * 选择.content类下的.right类元素内部的.price类元素，用于定义价格相关部分的样式。
 * 设置文字颜色为红色（red），让价格信息更加醒目，吸引用户的注意力，同时设置字体大小为40px，
 * 突出显示价格内容，使其在页面中更加显眼。
 */
.content>.right>.price {
  color: red;
  font-size: 40px;
}

/* 
 * 选择.content类下的.right类元素内部的.old类元素，一般用于表示原价的样式。
 * 设置文字颜色为#666（深灰色），将原价以相对较暗的颜色显示，与其他价格信息区分开。
 * 同时添加text-decoration: line-through样式，给文字添加删除线效果，表示这是一个被划掉的原价，
 * 常用于展示商品原价和折扣价对比的场景。
 */
.content>.right.old {
  color: #666;
  text-decoration: line-through;
}

/* 
 * 选择.content类下的.right类元素内部的.discount类元素，通常用于表示折扣相关的样式，比如折扣比例等。
 * 设置文字颜色为yellowgreen（黄绿色），以一种比较醒目的颜色突出显示折扣信息，方便用户快速识别优惠情况。
 */
.content>.right.discount {
  color: yellowgreen;  
}

/* 
 * 选择.content类下的.right类元素内部的button元素，用于定义按钮的样式。
 * 设置内边距为5px，让按钮在水平和垂直方向上有一定的内部空间，使按钮看起来更饱满、美观。
 * 字体大小设置为24px，保证按钮上文字的合适大小，便于用户查看和操作。
 * 最后设置鼠标指针样式为手型（cursor: pointer），当鼠标悬停在按钮上时，提示用户这是一个可点击的元素。
 */
.content>.right>button {
  padding: 5px;
  font-size: 24px;
  cursor: pointer;
}